<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?= $this -> title?></title>
<link href="<?= $this -> template?>/css/style.css" rel="stylesheet" type="text/css" />

<?php $this -> loadAPIs()?>

<script type="text/javascript" >
$(function(){
	$("#nav ul.about li:even").addClass("about");
	$("#nav ul.business li:even").addClass("busi");
	
		   
	var arrAud = $("#_audience li img").toArray();		   
	var img = Array('resi.png', 'comm.png', 'indus.png', 'park.png');
	
	$.each(arrAud, function(i, item){
							//alert(item);
							var path = "<?= $this->template?>/images/"+img[i];
							$(item).attr("src", path);
							//alert(path);
							});
											  
											  
	$("#_audience li a:first").addClass("first");
	$("#_audience li a:last").addClass("last");
	
	
	//search
	$("#key_words").focus(function(){
								   $(this).val('');
								   });
	$("#key_words").blur(function(){
								  if($(this).val() == '')
								  {
								  	$(this).val('Search Here ....');
								  }
								   });
	

});

</script>

</head>

<body>

<!-- HEADER START -->
<div id="header">

<div id="logo">

</div>

<!-- Just to increase height automatically --><div id="height_increaser"></div>

<div id="nav">
<ul>
<li><a href="?page=home" class="first">Home</a></li>
<li><a href="?page=products">Purchase Products</a></li>
<li><a href="?page=content&sub=explore&contentName=Self-Clean-Technology">Selft Clean Technology</a></li>
<li><a href="?page=content&sub=explore&contentName=Business-Opportunities" class="busis">Business Opportunities</a></li>
<li><a href="?page=content&sub=explore&contentName=About-Us" class="last">About Us</a></li>
</ul>

<!--<div id="drop">
<ul class="about">
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
</ul>
<ul class="business">
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
<li><a href="#">For landscapers</a></li>
</ul>

</div>-->

</div>



<div id="nav2">

<div id="cart">
<a href="?page=cart">
<img src="<?= $this -> template?>/images/cart.png" />
Cart [<?= $this->getCartCount($this -> page)?>]
</a>
</div>

<div id="button">
<ul id="_audience">
<?php
foreach($arrAudience as $aud):
$urlExplore = '?page=home&sub=explore&tag='.$aud['tagName'].'&type='.$aud['tagType'];
?>
	<li><a href="<?= $urlExplore?>"><img src="" />
			<?= trim($aud['tagName'])?>
        </a>
    </li>
<?php
endforeach;
?>
</ul>
</div>

<div id="search">
<form>
<input type="field" class="field_search" value="Search Here ...." id="key_words" />
<input type="button" class="button_search" />
</form>
</div>

</div>

</div>
<!-- HEADER END -->